<template>
  <k-view class="stock-item">
    <k-view class="stock-container">
      <k-view
        v-if="sequence && [1, 2, 3].includes(sequence)"
        :class="`sequence-img sequence-${sequence}`"
      ></k-view>
      <k-view v-if="sequence && sequence > 3" :class="`sequence sequence-${sequence}`">{{
        sequence
      }}</k-view>
      <k-view class="stock">
        <k-view class="stock-name">{{ stockName || '--' }}</k-view>
        <k-view class="stock-score" v-if="score"
          >健康度得分：<span>{{ score || '--' }}</span></k-view
        >
        <k-view class="stock-score" v-else>{{ stockCode }}</k-view>
      </k-view>
    </k-view>
    <k-button v-if="hasPk" class="pk" type="primary" @click.stop="jumpToPk">PK</k-button>
  </k-view>
</template>

<script setup lang="ts">
import { PAGEID } from '@/config/stat';
import { jumpByUrl } from '@/utils';
import { sendClickStat } from '@/utils/stat';
import Apis from '@king-fisher/apis';
interface Props {
  sequence?: number;
  score?: number;
  stockName: string;
  stockCode: string;
  originCode?: string;
  originName?: string;
  hasPk?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  hasPk: true,
});
const jumpToPk = () => {
  if (props.originCode === props.stockCode) {
    Apis.Toast.show('无法与相同公司进行对比，换一个试试');
  } else {
    sendClickStat(`${PAGEID.PKSEARCH}.click`, props.originCode);
    jumpByUrl({
      name: 'pk',
      query: {
        stockCode1: props.originCode,
        stockName1: props.originName,
        stockCode2: props.stockCode,
        stockName2: props.stockName,
        hasConversion: true,
      },
    });
  }
};
</script>

<style scoped lang="less">
.stock-item {
  width: 100%;
  height: 106px;
  box-sizing: border-box;
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .stock-container {
    display: flex;
    align-items: center;

    .sequence {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 40px;
      height: 40px;
      border-radius: 8px;
      font-family: THSJinRongTi-Bold;
      font-size: 36px;
      color: #595959;
      letter-spacing: 0.4px;
      margin-right: 16px;
      font-weight: bolder;

      &-img {
        width: 40px;
        height: 40px;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        margin-right: 16px;
      }
    }

    .sequence-1 {
      background-image: url(//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/c52fc5ce-f987-4a08-80d9-b7d82e9b4134.png);
    }

    .sequence-2 {
      background-image: url(//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/b5d626bc-0cf7-4cbd-8a8e-e345effcf44d.png);
    }

    .sequence-3 {
      background-image: url(//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/fe88c269-67b6-46fe-a866-0683cccd520d.png);
    }

    .stock {
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      &-name {
        font-family: PingFangSC-Regular;
        font-size: 32px;
        color: #262626;
        line-height: 42px;
        font-weight: 400;
      }

      &-score {
        font-family: PingFangSC-Regular;
        font-size: 24px;
        color: #b3b3b3;
        line-height: 28px;
        font-weight: bold;

        span {
          font-family: THSJinRongTi-Regular;
          color: #595959;
        }
      }
    }
  }

  .pk {
    width: 130px;
    height: 50px;
    color: #ff2436;
    font-size: 26px;
    font-family: PingFangSC-Medium;
    background: rgba(255, 36, 54, 0.08);
    border-radius: 8px;
  }
}

[theme-mode='black'] .stock-item {
  .stock {
    &-name {
      color: rgba(255, 255, 255, 0.84);
    }

    &-score {
      color: rgba(255, 255, 255, 0.6);
    }
  }
}
</style>
